@import '~@alife/aisc-core/purple/scss/index.scss';
.diff-widget {
  background: $gray-01;
  border-top: 1px solid $gray-02;
  border-bottom: 1px solid $gray-02;
}
.diff-widget-content {
  padding: 0;
}
// side-by-side 在左边
.diff-widget-gutter {
  .diff-inline-container {
    border-right: 1px solid $gray-02;
  }
}
// side-by-side 在右边
.diff-widget-content[colspan='2'] {
  .diff-inline-container {
    border-left: 1px solid $gray-02;
  }
}
.diff-inline-container {
  // border: 1px solid $gray-03;
  border-left: none;
  border-right: none;
  background: $gray-01;
  .inline-rule-card-container {
    // max-width: 800px;
    margin-top: 12px;
    border-bottom: 1px solid $gray-02;
    &:first-child {
      margin-top: 0;
    }
    &:last-child {
      border-bottom: 0;
    }
  }
}
.inline-comment-container {
  // max-width: 800px;
  .cke_chrome {
    border-left: 1px solid $gray-02;
    border-right: 1px solid $gray-02;
    margin-top: 8px;
  }
  &.notMatched-comment-container {
    margin: 12px;
  }
}
.conversation {
  overflow: hidden;
  border-bottom: 1px solid $gray-02;
  &:last-child {
    border-bottom: none;
  }
  &.use-in-log {
    border-bottom: 1px solid $gray-02;
    margin-bottom: 16px;
    &:last-child {
      margin-bottom: 0;
      border-bottom: none;
    }
  }
  &-reply-trigger {
    background: $color-fill1-1;
    padding: 8px 12px;
    border-top: 1px solid $gray-02;
  }
}

.changes-container-right.has-comment .diff-line {
  .diff-gutter[data-line-number] {
    // TODO 以后去掉，commit和compare暂时不让gutter有cursor，cr的有cursor
    cursor: pointer;
    // hover到行号上出现评论提示
    &:hover {
      position: relative;
      &::after {
        position: absolute;
        font-family: sans-serif;
        content: '';
        background: $primary-brand
          url('https://img.alicdn.com/tfs/TB1V_Z3l8r0gK0jSZFnXXbRRXXa-200-200.png');
        color: $color-white;
        padding: 2px;
        border-radius: 2px;
        top: 0;
        left: 34px;
        width: 20px;
        height: 20px;
        cursor: pointer;
        z-index: 1;
        background-origin: content-box;
        background-size: 16px 16px;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }
  }
  .diff-code {
    position: relative;
    .diff-code-comment-icon {
      display: none;
      position: absolute;
      font-family: sans-serif;
      content: '';
      background: $primary-brand
        url('https://img.alicdn.com/tfs/TB1V_Z3l8r0gK0jSZFnXXbRRXXa-200-200.png');
      color: $color-white;
      padding: 2px;
      border-radius: 2px;
      top: 0;
      left: -5px;
      width: 20px;
      height: 20px;
      cursor: pointer;
      z-index: 1;
      background-origin: content-box;
      background-size: 16px 16px;
      background-repeat: no-repeat;
      background-position: center center;
    }
    &:hover {
      .diff-code-comment-icon {
        display: block;
      }
    }
    &.diff-code-omit:hover {
      .diff-code-comment-icon {
        display: none;
      }
    }
  }
}

.inline-issues-detail {
  &-item {
    padding: 16px 0 10px;
    border-top: 1px solid $gray-02;
    position: relative;
    &:first-child {
      border-top: 0;
      padding-top: 0;
      &-feedback-btns {
        top: 0;
      }
    }
    &:last-child {
      padding-bottom: 4px;
    }
    &-title {
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 8px;
    }
    &-feedback-btns {
      position: absolute;
      top: 12px;
      right: 4px;
    }
  }
}
.inline-issues-feedback-btn {
  cursor: pointer;
  margin-left: 8px;
  &.active,
  &:hover {
    color: $color-b1-6;
  }
}

.diff-img-wraper {
  display: flex;
  align-items: flex-start;
  & > div {
    flex: 1;
    &:first-child {
      border-right: 1px solid $gray-02;
    }
  }
}
.diff-single-img {
  text-align: center;
  img {
    display: inline-block;
    vertical-align: middle;
  }
}
